<template>
<div class="page-footer">
    
    <div class="page-footer-content">
        <i-row>
            <i-col class='footer-mod' :span=" 24 / mods.length"  v-for="(mod, index) of mods" :key='index'>
                <div class="footer-mod-content">

                    <h4 class="footer-mod-title">
                        {{mod.title}}
                    </h4>

                    <ul class="footer-mod-list">
                        <li class="footer-mod-list-item" v-for="(item, index) of mod.list" :key='index'>
                            <a :href="item.path">
                                <i v-if='item.icon' :class='["iconfont", item.icon]'></i>
                                <span class="label">
                                    {{item.label}}
                                </span>
                            </a>
                            
                        </li>
                    </ul>

                </div>
            </i-col>
        </i-row>
    </div>

    <div class="version">
        @Copyright#2018-2020
    </div>
    
</div>
</template>

<script lang='ts'>
import {Component, Vue, Prop} from 'vue-property-decorator';


@Component
export default class Topbar extends Vue{

    mods = [
        
        {
            title: '常用资料',
            list: [
                {
                    label: '运输署',
                    path: '/',
                },
                {
                    label: '二手买卖契约',
                    path: '/',
                }
            ]    
        },
        {
            title: '关于我们',
            list: [
                {
                    label: '隐私政策',
                    path: '/',
                },
                {
                    label: '使用条款',
                    path: '/',
                },
                {
                    label: '常见问题',
                    path: '/',
                },
            ]    
        },
        {
            title: '联系方式',
            list: [
                {
                    label: '九龙大街',
                    path: '/',
                    icon: 'icon-location'
                },
                {
                    label: '(+562) 111 111',
                    path: '/',
                    icon: 'icon-phone'
                },
                {
                    label: '1111@qq.com',
                    path: '/',
                    icon: 'icon-youxiang'
                },
            ]    
        }
     
    ]
    
}


</script>

<style scoped lang='less'>
.page-footer{
    padding: 30*@rem 0 10*@rem;
    background: url('../../assets/page-foot-bg.png') center;
    background-size: 100% 100%;
    color: @fontColorLight;

    a{
        color: @fontColorLight
    }
    
}

.page-footer-content{
    .max-page-width();
    margin: auto;
    padding: 0 10*@rem;
}

.footer-mod{
    display: flex;
    justify-content: center;
}

.footer-mod-content{

}

.footer-mod-title{
    .df-title();
    position: relative;
    padding-bottom: 10*@rem;

    &::before{
        @h: 2*@rem;
        content: '';
        position: absolute;
        left: 4*@rem;
        bottom: @h/-2;
        
        width: 40%;
        height: @h;
        background: @fontColorLight;
    }
   
}

.footer-mod-list{
    margin-top: 18*@rem;

}

.footer-mod-list-item{
    @h: 28*@rem;
    height: @h;
    line-height: @h;
    font-size: @fontSizeSm;
}

.version{
    margin-top: 30*@rem;
    text-align: center;
}

</style>